<template>
  <div class="video_ls" v-loading="vidoeList.loading|| !playerFlag">
    <div class="i_vidioI clear">
      <span>{{ vidoeList.recorder_class_name }}</span>
      <el-select
        v-if="parseInt(vidoeList.type) !== 3 && parseInt(vidoeList.type) !== 4"
        style="width: 130px"
        @change="selectChange()"
        filterable
        v-model="vidoeList.recorder_status"
        placeholder="请选择"
      >
        <el-option
          v-for="item in vidoeList.opArr"
          :key="item.code"
          :label="item.txt"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div>
    <a class="i_vidioLk" @click="videoLink(vidoeList.id)"><i>进入播放</i></a>
    <flvdplayer  v-if="playerOption.url && playerFlag" :id="`playerId${domId}`" :playerOption.sync="playerOption" ></flvdplayer>

    <!-- && !webrtc <webRtcPlayer
      :uid="`${domId}`"
      ref="player"
      :url="src"
      v-else-if="webrtc"
    ></webRtcPlayer> -->

    <img v-else src="../../../assets/images/image_mingshi_bg3.png" alt="" />
  </div>
</template>

<script>
// import flvPlayer from "../../common/flvPlayer";
// import flvPlayer from "../../common/castFlv";
import webRtcPlayer from "../../common/webrtcPlayer";
import flvdplayer from '@/components/common/flvdplayerX'
export default {
  props: ["listData"],
  components: {
    // flvPlayer,
    webRtcPlayer,
    flvdplayer
  },
  computed: {
    webrtc() {
      return this.$store.getters.isSupportWebRtc;
    },
    allownine() {
      return this.$store.getters.isAllowNine;
    },
  },
  data() {
    return {
      playerFlag: true,
      rtcIndex: "",
      src: "",
      stayLoadingInx: [], //持续加载的设备的下标数组，配合定时器
      stayLoadingTimeOut: {},
      typeArr: {
        0: "0620",
        1: "0600B",
        2: "0650",
        3: "rtmp",
        4: "rtsp",
        5: "奥威亚",
        6: "网动",
        7: "中庆",
        8: "锐取",
        9: "0683",
        10: "0660",
      },
      operateCommonArr: {
        0: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [2, 3, 4, 5, 6, 7],
          '直播中': [1, 3, 4, 5, 6, 7],
          '录制中': [1, 2, 5, 6, 7],
          '停止': [1, 2, 3, 6, 7],
        },
        1: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [22, 21, 8],
          '停止': [20, 8],
        },
        2: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [9, 11, 12, 13],
          '停止': [10, 13],
          '已暂停': [10, 12, 13],
        },
        9: {
          '不在线': [],
          '在线': [],
        },
        10: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [25, 27, 28],
          '停止': [26],
          '已暂停': [26, 28],
        },
      },
      operateArr: {
        0: "尝试开机",
        4: "预览",
        1: "录播",
        2: "直播",
        3: "录制",
        5: "停止",
        6: "重启",
        7: "关机",
        22: "预览",
        20: "录播",
        21: "停止",
        8: "高级配置界面",
        14: "唤醒",
        /*9:'预览',*/ 
        10: "录播",
        11: "暂停",
        12: "停止" /*,13:'高级配置界面'*/,
        15: "软关机",
        25: "预览",
        26: "录播",
        27: "暂停",
        28: "停止",
      },
      domId: 0,
      playerOption: {
        type: "flv",
        url: "",
        rtcUrl: "",
        muted: true,
        status_stream: true,
        status_stream_audio: true,
      },
      checkMuiltOP: [],
      vidoeList: [],
    };
  },
  created() {},
  mounted() {

    this.stayLoadingTimeOut = setInterval(() => {
      this.checkStayLoading();
    }, 15000);
    this.vidoeList = this.listData[0];
    this.src = this.vidoeList.webrtc_url;
    // console.log(this.vidoeList, this.src, "hahhaha");
  },
  beforeDestroy() {
    this.stayLoadingTimeOut && clearInterval(this.stayLoadingTimeOut);
    this.stayLoadingTimeOut = null;
    this.playerFlag = false
    console.log('playerFlag', this.playerFlag)
  },
  watch: {
    listData: {
      handler(nn) {
        if (!is_empty(nn[0]) && nn[0].preview) {
          this.vidoeList = nn[0];
          this.playerOption.url = nn[0].play_url;
          this.playerOption.status_stream =
            nn[0].status_stream == "1" ? true : false;
          this.playerOption.status_stream_audio =
            nn[0].status_stream_audio == "1" ? true : false;

          this.domId = nn[0].id;
        } else {
          this.playerOption.url = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    videoLink(id) {
      this.$router.push({ path: "/inspection/play", query: { id: id } });
    },
    //异步加载设备状态
    getRecorderStatus(inx) {
      this.listData[inx].watchUpdateStatus = false;
      this.listData[inx].loading = true;
      this.listData[inx].opArr = [];
      let success = (data) => {
        if (
          !is_empty(
            this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
          ) &&
          this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
            .length > 0
        ) {
          for (
            var i =
              this.operateCommonArr[this.listData[inx].type][data.data._STATUS]
                .length - 1;
            i >= 0;
            i--
          ) {
            var op = {
              code: this.operateCommonArr[this.listData[inx].type][
                data.data._STATUS
              ][i],
              txt: this.operateArr[
                this.operateCommonArr[this.listData[inx].type][
                  data.data._STATUS
                ][i]
              ],
            };
            if (!is_empty(op.code) && !is_empty(op.txt)) {
              this.listData[inx].opArr.push(op);
            }
            // op = { code : 0 , txt : '' };
          }
        }
        //添加当前状态
        this.listData[inx].opArr.unshift({ code: -1, txt: data.data._STATUS });
        if (!is_empty(data.data._STATUS) && data.data._STATUS === "停止") {
          this.listData[inx].opArr.push({ code: 15, txt: this.operateArr[15] });
        } else if (is_empty(data.data._STATUS) && data.data._STATUS == "录播") {
          this.listData[inx].opArr = [];
          this.listData[inx].opArr.push({ code: 14, txt: this.operateArr[14] });
          this.listData[inx].opArr[0] = { code: -1, txt: "关机状态" };
        }
        if (
          parseInt(this.listData[inx].type) === 0 &&
          data.data._STATUS == "无法连接"
        ) {
          this.listData[inx].opArr.splice(1, 0, {
            code: 0,
            txt: this.operateArr[0],
          });
        }
        //下拉第一个选项作为当前状态
        this.listData[inx].recorder_status = -1;
        if (in_array(inx, this.stayLoadingInx, "inx")) {
          //正常获取到状态
          if (
            !(
              data.data._STATUS == "无法连接" ||
              data.data._STATUS == "无法识别" ||
              data.data._STATUS == "不在线"
            )
          ) {
            let s_inx = -1;
            for (var i = this.stayLoadingInx.length - 1; i >= 0; i--) {
              if (inx === this.stayLoadingInx[i].inx) {
                s_inx = i;
                break;
              }
            }
            if (s_inx >= 0) {
              this.stayLoadingInx.splice(s_inx, 1);
              this.listData[inx].loading = false;
            }
          }
        } else {
          this.listData[inx].loading = false;
        }
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/recorder/recorder_status", {
        params: { id: this.listData[inx].id },
        func: { success: success },
      });
    },
    selectChange() {
      var inx = 0;
      var code = this.vidoeList.recorder_status;
      this.recorderTransfer(inx, code);
    },
    //如果开机或重启超过4分钟将不会再持续获取设备状态
    checkStayLoading() {
      if (this.stayLoadingInx.length > 0) {
        for (var i = this.stayLoadingInx.length - 1; i >= 0; i--) {
          let inx = this.stayLoadingInx[i].inx;
          if (Number(new Date()) - this.stayLoadingInx[i].times > 240 * 1000) {
            this.stayLoadingInx.splice(i, 1);
          }
          this.getRecorderStatus(inx);
        }
      }
    },
    //设备操作转发
    recorderTransfer(inx, code) {
      if (parseInt(this.listData[inx].type) === 0) {
        this.$message.warning("该功能未开发");
        //this.change0620A(inx,code);
      } else if (parseInt(this.listData[inx].type) === 2) {
        this.change0650(inx, code);
      } else if (parseInt(this.listData[inx].type) === 1) {
        this.$message.warning("该功能未开发");
      } else if (parseInt(this.listData[inx].type) === 10) {
        //this.$message.warning('该功能未开发')
        this.change0660(inx, code);
      }
    },
    change0650(inx, code) {
      switch (code) {
        case 0:
          //关闭某个窗口
          break;
        case 9:
          //预览
          this.getRecorderStatus(inx);
          break;
        case 10:
        case 11:
        case 12:
          if (this.checkTimeFast(this.listData[inx].ip)) {
            this.getRecorderStatus(inx);
            this.$message.warning("对该设备操作过于频繁");
            return false;
          }
          this.listData[inx].loading = true;
          var rec_type = code - 9;
          var success = (data) => {
            if (data.data["Result"] == null || data.data["Result"] != 1) {
              this.$message.error("指令执行失败，录播主机错误！");
            }
            this.getRecorderStatus(inx);
          };
          var fail = (data) => {
            this.$message.error(data.msg);
            this.getRecorderStatus(inx);
          };
          var param = {
            ip: this.listData[inx].ip,
            code: 30010,
            RecType: rec_type,
            RoomName: "0650",
            TeacherName: "管理员",
            CourseName: "C",
            Notes: "管理员录制",
          };
          this.$ajax.post("api/recorder/control_0650", param, {
            func: { success: success, fail: fail },
          });
          break;
        case 13:
          //高级界面配置
          break;
        case 14:
        case 15:
          if (code == 14) {
            // 尝试开机
            var Status = 1;
          } else {
            // 关机
            var Status = 0;
          }
          this.listData[inx].loading = true;
          var success = (data) => {
            if (
              typeof data.data["Result"] != "undefined" &&
              (data.data["Result"] == null || data.data["Result"] != 1)
            ) {
              this.$message.error("指令执行失败，录播主机错误！");
            } else {
              if (code == 14) {
                if (!in_array(inx, this.stayLoadingInx, "inx")) {
                  this.stayLoadingInx.push({
                    inx: inx,
                    times: Number(new Date()),
                  });
                }
              }
            }
            this.getRecorderStatus(inx);
          };
          var fail = (data) => {
            this.$message.error(data.msg);
            this.getRecorderStatus(inx);
          };
          var param = {
            id: this.listData[inx].id,
            code: 30089,
            OptType: 1,
            Status: Status,
            PassKey: "DirectSdk",
          };
          this.$ajax.post("api/recorder/control_0650", param, {
            func: { success: success, fail: fail },
          });
          break;
        default:
          break;
      }
    },
    change0660(inx, code) {
      switch (code) {
        case 25:
          //预览
          // this.getRecorderStatus(inx);
          // this.videoView(this.listData[inx].id)
          this.videoLink(this.listData[inx].id);
          break;
        case 26:
        case 27:
        case 28:
          this.listData[inx].loading = true;
          var rec_type = code - 25;
          var success = (data) => {
            if (
              typeof data.data["MsgHead"] != "undefined" &&
              typeof data.data["MsgHead"]["Result"] != "undefined" &&
              (data.data["MsgHead"]["Result"] == null ||
                data.data["MsgHead"]["Result"] != 1)
            ) {
              this.$message.error("指令执行失败，录播主机错误！");
            }

            setTimeout(() => {
              this.getRecorderStatus(inx);
            }, 2000);
          };
          var fail = (data) => {
            this.$message.error(data.msg);
            this.getRecorderStatus(inx);
          };
          var param = {
            id: this.listData[inx].id,
            ip: this.listData[inx].ip,
            code: 30010,
            RecType: rec_type,
            RoomName: "0660",
            TeacherName: "管理员",
            CourseName: "C",
            Notes: "管理员录制",
          };
          this.$ajax.post("api/recorder/control_0660", param, {
            func: { success: success, fail: fail },
          });

          break;

        default:
          break;
      }
    },
    //检测是否频繁操作
    checkTimeFast(ip) {
      var ipColumn =
        this.checkMuiltOP.length > 0
          ? getOneColumn(this.checkMuiltOP, "ip")
          : [];
      var inx = ipColumn.indexOf(ip);
      if (inx > -1) {
        if (Date.parse(new Date()) - this.checkMuiltOP[inx].timeout < 10000) {
          return true;
        } else {
          this.checkMuiltOP[inx].timeout = Date.parse(new Date());
        }
      } else {
        this.checkMuiltOP.push({ ip: ip, timeout: Date.parse(new Date()) });
      }
      return false;
    },
  },
};
</script>

<style lang="scss">
.video_ls {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }

  .vjs-custom-skin > .video-js .vjs-big-play-button {
    border-radius: 50%;
    width: 70px;
    // height: 3em !important;
    // line-height: 3em !important;
  }
  .video-player,
  .video-js {
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  &:hover {
    .i_vidioI,
    .i_vidioLk {
      opacity: 1;
      visibility: visible;
    }
  }
}
.i_vidioI {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  background: rgba(225, 225, 225, 0.3);
  color: #ffffff;
  font-size: 12px;
  z-index: 4;
  padding: 15px 2%;
  visibility: hidden;
  // opacity: 0;
  transition: 0.5s;
  > span {
  }
  .el-select {
    border: #ffffff;
    background: #2a2e31;
    color: #ffffff;
    float: right;
    .el-input__inner {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
      border-radius: 0;
    }
    .el-input__icon {
      line-height: 24px;
    }
  }
}
.i_vidioLk {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 3;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
  text-align-last: inital;
  text-align: center;
  > i {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    cursor: pointer;
    display: inline-block;
  }
}
.i_vidioLk + div {
  width: 100%;
  height: 100%;
  overflow: hidden;

  > div {
    padding-top: 0 !important;
  }
}
</style>

